<!DOCTYPE html>
<html lang="en">
<head>
    <title>问卷渠道信息统计</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <style>
        html, body {
            height: 100%;
        }

        .buttons {
            padding: 10px 5px;
            text-align: center;
        }

        .button {
            background: #409eff;
            color: #fff;
            border-color: #409eff;
            border-radius: 5px;
            padding: 5px;
        }

        .buttons span {
            padding: 0 5px;
        }
    </style>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="dist/echarts.min.js"></script>
</head>
<body style="margin: 0">
<div id="main" style="height: 100%">
    <div class="buttons">
        <input class="button" type="button" value="< 上一周" @click="doPrev()">
        <span v-text="date.Prev"></span>~<span v-text="date.Next"></span>
        <input class="button" type="button" value="下一周 >" @click="doNext()">
    </div>
    <div id="container" style="height: 100%"></div>

    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>-->
</div>
</body>
<script>
    var vue = new Vue({
        el: '#main',
        data: {
            option: {
                title: {
                    text: '问卷渠道信息统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['核验价大全', '魔都财观', '新房指南', '升学大全', '买房攻略',
                        '平米房产咨询', '平米房产服务号', '抖音赵公子']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '核验价大全',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '魔都财观',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '新房指南',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '升学大全',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '买房攻略',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '平米房产咨询',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '平米房产服务号',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    },
                    {
                        name: '抖音赵公子',
                        type: 'line',
                        stack: '总量',
                        data: [0, 0, 0, 0, 0, 0, 0]
                    }
                ]
            },
            //时间
            date: {
                Prev: "2021-08-30",
                Next: "2021-09-05"
            }
        },

        // 点击菜单使用的函数
        methods: {
            init: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('container'));
                myChart.setOption(this.option);
            },
            //上一周
            doPrev: function () {
                console.log("上一周")
                var time = this.date.Prev
                this.getData(time)
            },
            //下一周
            doNext: function () {
                console.log("下一周")
                var time = this.date.Next
                this.getData(time)
            },
            //获取数据
            getData: function (time) {
                console.log(time)
                //模拟后台返回数据中每周的数据
                var datas = [[120, 132, 101, 134, 90, 230, 210],
                    [220, 182, 191, 234, 290, 330, 310],
                    [150, 232, 201, 154, 190, 330, 410],
                    [820, 932, 901, 934, 2290, 130, 320],
                    [14, 92, 91, 94, 1290, 888, 120],
                    [89, 75, 217, 527, 227, 937, 727],
                    [272, 327, 627, 427, 772, 888, 120]]
                console.log(datas)
                for (let i = 0; i < this.option.series.length; i++) {
                    this.option.series[i].data = datas[randomNum(0, datas.length - 1)]
                }

                //渲染报表
                this.init();
            }
        }, mounted: function () {
            this.getData()
            this.init();
        }
    })

    //生成 [n,m] 的随机整数
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                break;
            default:
                return 0;
                break;
        }
    }

    Date.prototype.format = function (fmt) {
        const o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }

    function timeLimit(BeginDate, EndDate) {
        let begin = new Date(BeginDate);
        let end = new Date(EndDate);
        let beginDate = begin.getTime(begin);
        let endDate = end.getTime(end);
        var days = Math.floor((endDate - beginDate) / (24 * 3600 * 1000))
        return days;
    }
</script>

</html>